import React, {useEffect, useState} from 'react';
import {Form, Input, Modal,Row,Col,Space} from 'antd';
const useChangeValue = (defaultValue)=>{
    const [value,setValue] = useState();
};

const useSettingModal = (props) => {
    const {appid,appname,resolution} = props;
    const [form] = Form.useForm();
    const [visible,setVisible] = useState(false);

    useEffect(()=>{
        form.setFieldsValue({
            appid:appid,
            appname:appname,
            width:resolution['width'],
            height:resolution['height']
        });
    },[resolution]);
    const SettingModal = ()=>{
        return <Modal destroyOnClose visible={visible} onCancel={()=>{
            setVisible(false);
        }} onOk={()=>{
            setVisible(false);
        }}>
            <Form form={form}>
                <Row>
                    <Col span={12}>
                        <Form.Item labelCol={{span:8}} label={'应用ID'} name={'appid'}>
                            <Input disabled/>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item labelCol={{span:8}} label={'应用名称'} name={'appname'}>
                            <Input disabled/>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item labelCol={{span:8}} label={'分辨率'} name={'width'}>
                            <Input/>
                        </Form.Item>
                    </Col>
                    <Col span={10}>
                        <Form.Item labelCol={{span:3}} label={'*'} colon={false} name={'height'}>
                            <Input/>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>;
    };
    const openModal = () =>{
        setVisible(true);
    };
    return {
        SettingModal,
        openModal
    };

};
export default {
    useSettingModal:useSettingModal
}